<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load static %}

<!-- 写入 base.html 中定义的 title -->
{% block title %}
    文章详情
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}
<!-- 文章详情 -->
<div class="container">
    <div class="row">
        <div class="col-9">
            <!-- 标题及作者 -->
            <h1 class="col-12 mt-4 mb-4">{{ article.title }}</h1>
            <div class="col-12 alert alert-success">作者：{{ article.author }}
                <a href="#" onclick="confirm_delete()">删除文章</a>
                <form
                        style="display:none;"
                        id="safe_delete"
                        action="{% url 'article:article_delete' article.id %}"
                        method="POST"
                >
                    {% csrf_token %}
                    <button type="submit">发送</button>
                </form>
                <a href="{% url 'article:article_update' article.id %}">编辑文章</a>
                <div>
                    浏览：{{ article.total_views }}
                </div>
            </div>

            <!-- 文章正文 -->
            <div class="col-12">
                <p>{{ article.body|safe }}</p>
            </div>
            <!-- 发表评论 -->
            <hr>
            {% if user.is_authenticated %}
                <div>
                    <form action="{% url 'comment:post_comment' article.id %}" method="POST">
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="body">
                                <strong>
                                    我也要发言：
                                </strong>
                            </label>
                            <div>
                                {{ comment_form.media }}
                                {{ comment_form.body }}
                            </div>
                        </div>
                        <!-- 提交按钮 -->
                        <button type="submit" class="btn btn-primary ">发送</button>
                    </form>
                </div>
                <br>
            {% else %}
                <br>
                <h5 class="0">
                    请<a href="{% url 'userprofile:login' %}">登录</a>后回复
                </h5>
                <br>
            {% endif %}

            <!-- 显示评论 -->
            {% load mptt_tags %}
            <h4>共有{{ comments.count }}条评论</h4>
            <div class="row">
                <!-- 遍历树形结构 -->
                {% recursetree comments %}
                    <!-- 给 node 取个别名 comment -->
                    {% with comment=node %}
                        <div class="{% if comment.reply_to %} offset-1 col-11 {% else %} col-12 {% endif %}">
                            <hr>
                            <p>
                                <strong style="color: pink">{{ comment.user }}</strong>
                                {% if comment.reply_to %}
                                    <i class="far fa-arrow-alt-circle-right" style="color: cornflowerblue;"></i>
                                    <strong style="color: pink">{{ comment.reply_to }}</strong>
                                {% endif %}
                            </p>
                            <div>{{ comment.body|safe }}</div>
                            <div>
                                <span style="color: gray;">{{ comment.created|date:"Y-m-d H:i" }}</span>
                                <!-- 加载 modal 的按钮 -->
                                {% if user.is_authenticated %}
                                    <button type="button" class="btn btn-light btn-sm text-muted"
                                            onclick="load_modal({{ article.id }}, {{ comment.id }})">回复
                                    </button>
                                    {% else %}
                                        <a class="btn btn-light btn-sm text-muted" href="{% url 'userprofile:login' %}">回复</a>
                                    {% endif %}
                            </div>
                            <!-- Modal -->
                            <div class="modal fade" id="comment_{{ comment.id }}" tabindex="-1" role="dialog"
                                 aria-labelledby="CommentModalCenter" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                    <div class="modal-content" style="height: 480px">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalCenterTitle">回复 {{ comment.user }}：</h5>
                                        </div>
                                        <div class="modal-body" id="modal_body_{{ comment.id }}"></div>
                                        </div>
                                    </div>
                                </div>
                                {% if not comment.is_leaf_node %}
                                    <div class="children">{{ children }}</div>
                                {% endif %}
                            </div>
                        {% endwith %}
                    {% endrecursetree %}
            </div>
        </div>
    </div>
</div>

{% block script %}
<script>
    // 加载 modal
    function load_modal(article_id, comment_id) {
        let modal_body = '#modal_body_' + comment_id;
        let modal_id = '#comment_' + comment_id;
        // 加载编辑器
        if ($(modal_body).children().length === 0) {
            let content = '<iframe src="/comment/post-comment/' + article_id + '/' + comment_id + '" style="width: 100%; height: 100%;"></iframe>';
            $(modal_body).append(content);
        };

        $(modal_id).modal('show');
    }

    // 删除文章的函数
    function confirm_delete() {
        if (confirm("确认删除这篇文章吗？")) {
            // 用户点击了确定按钮
            location.href = '{% url "article:article_delete" article.id %}'
        } else {
            // 用户点击了取消按钮
        }
    }
</script>

{% endblock script %}
{% endblock content %}